<template>
  <div class="app-container">
    <span class="label">统计维度</span>
    <el-select
      v-model="reportType"
      clearable
      placeholder="请选择统计维度"
      size="small"
    >
      <el-option
        v-for="dict in reportTypeOptions"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
    <span class="label" style="margin-left: 12px">时间区间</span>
    <el-date-picker
      v-model="reportRange"
      :picker-options="pickerOptions"
      align="right"
      end-placeholder="结束日期"
      range-separator="至"
      size="small"
      start-placeholder="开始日期"
      type="daterange"
      unlink-panels
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <el-button icon="el-icon-search" size="mini" style="margin-left: 24px" type="primary" @click="handleQuery">搜索
    </el-button>
    <el-button icon="el-icon-printer" size="mini" style="margin-left: 12px" type="success" @click="handlePrint">打印
    </el-button>

    <div id="reportNameBlock" style="text-align: center; margin-top: 24px; margin-bottom: 12px">
      <span style="font-size: 24px; font-weight: 400;">{{ reportName }}</span>
    </div>
    <el-table
      v-if="reportType===1"
      id="sampTypeReportTable"
      v-loading="loading"
      :data="sampTypeReportList"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      default-expand-all
      row-key="sampTypeId"
      show-summary
    >
      <el-table-column label="样本类型编号" prop="sampTypeCode"/>
      <el-table-column align="center" label="样本类型" prop="sampTypeName"/>
      <el-table-column align="center" label="本期库存" prop="totalCount"/>
      <el-table-column align="center" label="本期入库" prop="stockInCount"/>
      <el-table-column align="center" label="本期出库" prop="stockOutCount"/>
      <el-table-column align="center" label="本期申领" prop="stockClaimCount"/>
      <el-table-column align="center" label="本期归还" prop="stockReturnCount"/>
    </el-table>
    <el-table
      v-if="reportType===2"
      id="sourceTypeReportTable"
      v-loading="loading"
      :data="sourceTypeReportList"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      default-expand-all
      row-key="sourceTypeId"
      show-summary
    >
      <el-table-column label="样本源类型编号" prop="sourceTypeCode"/>
      <el-table-column align="center" label="样本源类型" prop="sourceTypeName"/>
      <el-table-column align="center" label="本期库存" prop="totalCount"/>
      <el-table-column align="center" label="本期入库" prop="stockInCount"/>
      <el-table-column align="center" label="本期出库" prop="stockOutCount"/>
      <el-table-column align="center" label="本期申领" prop="stockClaimCount"/>
      <el-table-column align="center" label="本期归还" prop="stockReturnCount"/>
    </el-table>
    <el-table
      v-if="reportType===3"
      id="sampGroupReportTable"
      v-loading="loading"
      :data="sampGroupReportList"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      default-expand-all
      row-key="sampGroupId"
      show-summary
    >
      <el-table-column label="样本组编号" prop="sampGroupCode"/>
      <el-table-column align="center" label="样本组" prop="sampGroupName"/>
      <el-table-column align="center" label="本期库存" prop="totalCount"/>
      <el-table-column align="center" label="本期入库" prop="stockInCount"/>
      <el-table-column align="center" label="本期出库" prop="stockOutCount"/>
      <el-table-column align="center" label="本期申领" prop="stockClaimCount"/>
      <el-table-column align="center" label="本期归还" prop="stockReturnCount"/>
    </el-table>
  </div>
</template>

<script>
import { reportBySampGroup, reportBySampType, reportBySourceType } from '@/api/statistics/statistics'

export default {
  name: 'StatisticsReport',
  data() {
    return {
      // 遮罩层
      loading: false,
      reportType: undefined,
      reportTypeOptions: [
        { label: '样本类型', value: 1 },
        { label: '样本源类型', value: 2 },
        { label: '样本组', value: 3 }
      ],
      // 时间区间
      reportRange: undefined,
      // 报表名称
      reportName: undefined,
      // 样本类型 统计数据
      sampTypeReportList: [],
      // 样本源类型 统计数据
      sourceTypeReportList: [],
      // 样本组 统计数据
      sampGroupReportList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    // 根据样本组统计报表
    getReportBySampGroup() {
      this.loading = true
      let query = {
        samplingStart: this.reportRange ? this.reportRange[0] : undefined,
        samplingEnd: this.reportRange ? this.reportRange[1] : undefined
      }
      reportBySampGroup(query).then(response => {
        this.sampGroupReportList = this.handleTree(response.data, 'sampGroupId', 'parentId')
        this.loading = false
      })
    },
    // 根据样本源类型统计报表
    getReportBySourceType() {
      this.loading = true
      let query = {
        samplingStart: this.reportRange ? this.reportRange[0] : undefined,
        samplingEnd: this.reportRange ? this.reportRange[1] : undefined
      }
      reportBySourceType(query).then(response => {
        this.sourceTypeReportList = this.handleTree(response.data, 'sourceTypeId', 'parentId')
        this.loading = false
      })
    },
    // 根据样本类型统计报表
    getReportBySampType() {
      this.loading = true
      let query = {
        samplingStart: this.reportRange ? this.reportRange[0] : undefined,
        samplingEnd: this.reportRange ? this.reportRange[1] : undefined
      }
      reportBySampType(query).then(response => {
        this.sampTypeReportList = this.handleTree(response.data, 'sampTypeId', 'parentId')
        this.loading = false
      })
    },
    // 搜索按钮点击事件
    handleQuery() {
      switch (this.reportType) {
        case 1:
          this.reportName = '样本库统计报表 ' + (this.reportRange ? this.reportRange[0] + '~' + this.reportRange[1] : '')
          this.getReportBySampType()
          break
        case 2:
          this.reportName = '样本库统计报表 ' + (this.reportRange ? this.reportRange[0] + '~' + this.reportRange[1] : '')
          this.getReportBySourceType()
          break
        case 3:
          this.reportName = '样本库统计报表 ' + (this.reportRange ? this.reportRange[0] + '~' + this.reportRange[1] : '')
          this.getReportBySampGroup()
          break
      }
    },
    // 打印按钮点击事件
    handlePrint() {
      switch (this.reportType) {
        case 1:
          let stContent = document.getElementById('reportNameBlock').innerHTML +
            document.getElementById('sampTypeReportTable').innerHTML

          let stBodyStyle = '<style>table, table tr, table th, table td { text-align: center; border: 1 solid #000000; border-collapse:collapse } table td { padding: 3px 0 } </style>'
          let stFormHtml = stBodyStyle + '<body>' + stContent + '</body>'
          this.$lodop.commonPrint(this.reportName, stFormHtml, 0, 'A4')
          break
        case 2:
          let sotContent = document.getElementById('reportNameBlock').innerHTML +
            document.getElementById('sourceTypeReportTable').innerHTML

          let sotBodyStyle = '<style>table, table tr, table th, table td { text-align: center; border: 1 solid #000000; border-collapse:collapse } table td { padding: 3px 0 } </style>'
          let sotFormHtml = sotBodyStyle + '<body>' + sotContent + '</body>'
          this.$lodop.commonPrint(this.reportName, sotFormHtml, 0, 'A4')
          break
        case 3:
          let sgContent = document.getElementById('reportNameBlock').innerHTML +
            document.getElementById('sampGroupReportTable').innerHTML

          let sgBodyStyle = '<style>table, table tr, table th, table td { text-align: center; border: 1 solid #000000; border-collapse:collapse } table td { padding: 3px 0 } </style>'
          let sgFormHtml = sgBodyStyle + '<body>' + sgContent + '</body>'
          this.$lodop.commonPrint(this.reportName, sgFormHtml, 0, 'A4')
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.label {
  line-height: 36px;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 12px;
  font-weight: 700;
}
</style>
